<template>
    <div class="listContain">
    <table v-if="!isNewHouse">
        <tr v-for="dataItem in data" v-bind:key="dataItem" class="eDataList"
            @click="this.$router.push({ path: '/detail', query: { id: dataItem.id, index: index } })">

            <td style="padding-right: 20px;position: relative;padding-left: 20px;width: 10px;">
                <CommonImage :src="dataItem.pictureAddress" class="imgStyle" />
                <span v-if="dataItem.picNum > 1" class="picNum">+{{ dataItem.picNum }}</span>
            </td>

            <td class="tdBottom" style="width: 25%;">
                <div>
                    {{ dataItem.community }}&emsp;
                    {{ dataItem.building == null ? '' : dataItem.building + '-' }}{{ dataItem.unit == null ? '' :
                        dataItem.unit + '-' }}{{dataItem.roomIdentifier == null ? '' : dataItem.roomIdentifier }}
                </div>
                <div class="flexTag">
                    <span v-for="item in getTag(dataItem)" v-bind:key="item" :class="'tag'+item.index">
                        {{ item.value }}
                    </span>
                </div>
            </td>

            <td class="tdBottom">
                <div>{{ dataItem.price == null ? '-' : String(dataItem.price).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + " AED" }}</div>
                <div class="text1">
                    {{ dataItem.avPrice }}AED/m²
                </div>
            </td>

            <td class="tdBottom">
                <div>{{ dataItem.floorArea }}m²</div>
                <div class="text1">
                    {{ dataItem.toward == null ? '-' : dataItem.toward }} &ensp;
                </div>
            </td>

            <td class="tdBottom">
                <div>
                    {{
                        `${dataItem.roomNumber <= 0 ? '' : (dataItem.roomNumber + this.$t('text.House.l198'))}` +
                        `${dataItem.parlorNumber <= 0 ? '' : (dataItem.parlorNumber + this.$t('text.House.l199'))}` +
                        `${dataItem.toiletNumber <= 0 ? '' : dataItem.toiletNumber + this.$t('text.House.l200')}` +
                        `${dataItem.balconyNumber <= 0 ? '' : dataItem.balconyNumber + this.$t('text.House.l201')}` +
                        `${dataItem.balconyNumber <= 0 && dataItem.roomNumber <= 0 && dataItem.toiletNumber <= 0 &&
                            dataItem.toiletNumber <= 0 ? '-' : ''}` }} &ensp; </div>
                        <div class="text1">
                            {{ dataItem.decorationLevel == null ? '-' : dataItem.decorationLevel }}&ensp;
                        </div>
            </td>

            <td class="tdBottom">
                <div>{{ dataItem.storey }}{{ $t('text.House.l202') }}</div>
                <div class="text1">
                    {{ dataItem.buildingYears == null ? '-' : dataItem.buildingYears + $t('text.House.l321') }}
                </div>
            </td>

            <td class="tdBottom"  style="padding-right: 20px;">
                <div>{{ dataItem.realName }}&ensp;</div>
                <div class="text1">
                    {{ dataItem.eventType == '挂牌' ? dataItem.houseTime : dataItem.followTime }}&ensp;{{ dataItem.eventType
                    }}
                </div>
            </td>
        </tr>
    </table>


    <table v-if="isNewHouse">
        <tr v-for="dataItem in data" v-bind:key="dataItem"  class="eDataList"
            @click="this.$router.push({ path: '/newHouseDetail', query: { id: dataItem.id, index: index } })">

            <td style="padding-left: 20px;padding-right: 20px;position: relative;width: 10px;">
                <CommonImage :src="dataItem.pictureAddress" class="imgStyle" />
                <span v-if="dataItem.picNum > 1" class="picNum">+{{ dataItem.picNum }}</span>
            </td>

            <td class="tdBottom" style="width: 25%;">
                <div>{{ dataItem.name==null||dataItem.name==''?'-':dataItem.name }}&ensp;</div>
                <div class="flexTag">
                    <span v-for="item in getNewTag(dataItem)" v-bind:key="item" :class="'tag'+item.index">
                        {{ item.value }}
                    </span>
                </div>
            </td>

            <td class="tdBottom">
                <div>{{ (dataItem.unitPrice == null ? '-' : String(dataItem.unitPrice).replace(/\B(?=(\d{3})+(?!\d))/g,
                    ',') + " AED / m²") }}&ensp;</div>
                <div class="text1">
                    {{ $t('text.House.l310') }}
                </div>
            </td>

            <td class="tdBottom">
                <div>
                    {{ dataItem.lowerPrice == null ? '-' : String(dataItem.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                    }}-
                    {{ dataItem.upperPrice == null ? '-' : String(dataItem.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                    }}
                    AED/{{ $t('text.Common.l16') }}&ensp;
                </div>
                <div class="text1">
                    {{ $t('text.House.l311') }}
                </div>
            </td>

            <td class="tdBottom">
                <div>{{ dataItem.lowerArea == null ? '' : dataItem.lowerArea }}-{{ dataItem.upperArea == null ? '' :
                    dataItem.upperArea + 'm²' }}&ensp;</div>
                <div class="text1">
                    {{ $t('text.House.l312') }}&ensp;
                </div>
            </td>

            <td class="tdBottom">
                <div> {{ dataItem.unitType == null ? '-' : dataItem.unitType.split(",").join("/") +
                    $t('text.DialogLayout.l91') }}&ensp;</div>
                <div class="text1">
                    {{ dataItem.decorationLevel == null ? '-' : dataItem.decorationLevel }}&ensp;
                </div>
            </td>

            <td class="tdBottom" style="padding-right: 20px;">
                <div>{{ dataItem.openTime == null ? '-' : dataItem.openTime.split(" ")[0] +
                    $t('text.House.l313') }}&ensp;</div>
                <div class="text1">
                    {{ dataItem.area == null ? '-' : dataItem.area }}&ensp;
                </div>
            </td>

        </tr>
    </table>
    </div>
    
</template>
    
<script>
import CommonImage from '../input/CommonImage.vue';
export default {
    name: 'HouseList',
    components: {
        CommonImage
    },
    props: {
        data: {
            default: {},
        },
        isNewHouse: Boolean,
        index: [Number, String]
    },
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {
        getTag(dataItem) {
            let tagList = []
            if (dataItem.isTop == '1') {
                let tagItem = { index: 1, value: this.$t('text.Common.l17') }
                tagList.push(tagItem)
            }
            if (dataItem.isCollect) {
                let tagItem = { index: 2, value: this.$t('text.Common.l18') }
                tagList.push(tagItem)
            }
            if (Number(dataItem.dealStatus) > 0) {
                let tagItem = { index: 0, value: '' }
                switch (dataItem.dealStatus) {
                    case '0': tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l282'); tagList.push(tagItem); break;
                    case '1': tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l283'); tagList.push(tagItem); break;
                    case '2': tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l284'); tagList.push(tagItem); break;
                    case '3': tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l285'); tagList.push(tagItem); break;
                    case '4': tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l286'); tagList.push(tagItem); break;
                    case '5': tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l287'); tagList.push(tagItem); break;
                    default: tagItem.index = 3; tagItem.value = this.$t('text.DialogLayout.l277'); tagList.push(tagItem); break;
                }
            }
            if (dataItem.floorType != null) {
                let tagItem = { index: 4, value:  dataItem.floorType }
                tagList.push(tagItem)
            }
            if (dataItem.housingGrade != null) {
                let tagItem = { index: 5, value:  dataItem.housingGrade }
                tagList.push(tagItem)
            }
            if (dataItem.hasKey) {
                let tagItem = { index: 6, value: this.$t('text.Common.l15') }
                tagList.push(tagItem)
            }
            if (dataItem.characteristic != null && dataItem.characteristic != '') {
                dataItem.characteristic.split(',').forEach(element => {
                    let tagItem = { index: 7, value: element }
                    tagList.push(tagItem)
                });
            }
            if (dataItem.supportingFacilities != null && dataItem.supportingFacilities != '') {
                dataItem.supportingFacilities.split(',').forEach(element => {
                    let tagItem = { index: 7, value: element }
                    tagList.push(tagItem)
                });
            }
            if(tagList.length>6)
                tagList.length=6
            return tagList
        },
        getNewTag(dataItem){
            let tagList = []
            if(dataItem.isTop == '1'){
                let tagItem = { index: 1, value: this.$t('text.Common.l17') }
                tagList.push(tagItem)
            }
            if (dataItem.isCollect) {
                let tagItem = { index: 2, value: this.$t('text.Common.l18') }
                tagList.push(tagItem)
            }
            if(dataItem.saleStatus == this.$t('text.DialogLayout.l78')){
                let tagItem = { index: 4, value: this.$t('text.DialogLayout.l78') }
                tagList.push(tagItem)
            }
            if(dataItem.saleStatus == this.$t('text.DialogLayout.l80')){
                let tagItem = { index: 5, value: this.$t('text.DialogLayout.l80') }
                tagList.push(tagItem)
            }
            if(dataItem.saleStatus == this.$t('text.DialogLayout.l79')){
                let tagItem = { index: 6, value: this.$t('text.DialogLayout.l79') }
                tagList.push(tagItem)
            }
            if (dataItem.sellPoint != null && dataItem.sellPoint != '') {
                dataItem.sellPoint.split(',').forEach(element => {
                    let tagItem = { index: 7, value: element }
                    tagList.push(tagItem)
                });
            }
            if(tagList.length>6)
                tagList.length=6
            return tagList
        }
    },
    watch: {
    },
    computed: {

    }
}
</script>
    
<style scoped>
.tdBottom {
    text-align: left;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
table {
    border-spacing: 0 20px;
}

td {
    text-align: left;
    white-space: nowrap;
    font-size: 13px;
    color: #6698ff;
}

tr:hover {
    background-color: #f0f0f0;
}

.item {
    display: flex;
    align-items: baseline;
    width: 100%;
    border-bottom: 2px solid #eee;
    margin-left: 15px;
    margin-right: 30px;
    gap: 20px;
}

.flexTag {
    display: flex;
    flex-wrap: wrap;
    word-break: keep-all;
    overflow: auto;
    padding-bottom: 7px;
    padding-top: 5px;
    align-items: baseline;
}

.flexTag::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
    background-color: white;
    /*滚动槽颜色*/
}

.flexTag::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #79bbff;
    /*滚动条颜色*/
}

.imgStyle {
    width: 100px;
    height: 60px;
    border: 1px solid #f6f6f6;
}

span {
    color: #6698ff;
    font-size: 13px;
    white-space: nowrap;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(236, 128, 141);
    padding: 1px 6px;
    color: white;
    margin-right: 5px;
    margin-top: 5px;
}

.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #666de1;
    padding: 1px 6px;
    color: white;
    border: 1px solid #666de1;
    margin-right: 5px;
    margin-top: 5px;
}

.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #555555;
    padding: 1px 6px;
    color: white;
    border: 1px solid #555555;
    margin-right: 5px;
    margin-top: 5px;
}

.tag4 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f9cd90;
    padding: 1px 6px;
    color: white;
    border: 1px solid #f9cd90;
    margin-right: 5px;
    margin-top: 5px;
}

.tag5 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(66, 157, 248);
    padding: 1px 6px;
    color: white;
    border: 1px solid rgb(66, 157, 248);
    margin-right: 5px;
    margin-top: 5px;
}

.tag6 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #5ec8b2;
    padding: 1px 6px;
    color: white;
    border: 1px solid #5ec8b2;
    margin-right: 5px;
    margin-top: 5px;
}

.tag7 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #cacaca;
    padding: 1px 6px;
    color: white;
    border: 1px solid #cacaca;
    margin-right: 5px;
    margin-top: 5px;
}

.text1 {
    font-size: 12px;
    padding-top: 5px;
    color: rgb(156, 151, 151);
    word-break: keep-all;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
}

.picNum {
    color: white;
    background: #535352;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    top: 42px;
    right: 21px;
    transform: scale(0.8);
}
.eDataList{
    vertical-align: top;
    padding: 5px 30px;
    margin: 3px 0px;
    position: relative;
}
.listContain{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}
</style>